<!--第一个登录界面 -->
<template>
    <div id="backcont">
        <div class="content"> 
            <div class="login-cont">
                <div class="title">莫维春系统登录</div>   
                <div class="login-input"> 
                    <p>账号</p> 
                    <el-input class="inptflex" v-model="userName" placeholder="请输入账号" clearable />
                </div> 
                <div class="login-input">
                     <p>密码</p> 
                     <el-input  class="inptflex" v-model="userPAWD" placeholder= "请输入密码" clearable  type="password" show-password/>
                </div>
                <!-- 登录与注册切换 -->
                <div class="isLogin"><p @click="onUserC">{{isLogin}}</p></div>
                <!--按钮显示与隐藏-->
                <el-button v-if="isLogin == '登录' " type="primary" class="login-btn" @click="onLogin" >登录</el-button>
                <el-button v-else type="primary" class="login-btn" @click="onLogin">注册</el-button>

            </div>    
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent,ref } from 'vue'
import './study003.css'

export default defineComponent({
    setup () {
        const userName = ref('');
        const userPAWD = ref('') ;
        const isLogin = ref('登录') ;

        const onUserC = ()=>{
            if(isLogin.value == '登录'){
                isLogin.value = '注册';
            }else{
                isLogin.value = '登录';
            }
        };

        const onLogin = ()=>{
            if(isLogin.value == '登录'){
                alert(userName.value + ' 进行登录');
            }else{
                alert(userName.value + ' 进行注册');
            }
        };



        return {
            userName,
            userPAWD,
            isLogin,
            onUserC,
            onLogin

        }
    }
})
</script>

<style scoped>

</style>